<template name="components">
	<view style="background-color: #f9fbf2;">
		<view>
			<cu-custom bgColor="bg-gradual-blue" :isBack="false">
				<block slot="content">检索</block>
			</cu-custom>
			<view class="cu-bar bg-white search">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="text" placeholder="什么垃圾？" confirm-type="search" @input="searchIcon"
						:value="searchInput">
							<text class="cuIcon-close clear-btn" v-if="searchInput !== ''" @click="clearSearchInput"></text>
					</input>
				</view>
			</view>
			<view v-if="!isSearch">
				<swiper class="card-swiper" @change="cardSwiper" indicator-color="#8799a3"
					indicator-active-color="#0081ff" style="margin-bottom: -50rpx!important;">
					<swiper-item v-for="(item,index) in garbageTypes" :key="item.type"
						:class="currentCardIndex==index?'cur':''">
						<view class="swiper-item">
							<view class="bg-img bg-mask flex align-center align-center"
								:style="{'background-color': item.backgroundColor, 'height':'300rpx'}">
								<view class="padding-xl text-white">
									<view class="padding-xs text-xxl text-bold">
										{{item.type}}
									</view>
									<view class="padding-xs text-df">
										{{item.desc}}
									</view>
								</view>
								<view>
									<image :src='item.url' style="width: 60px; height: 60px;margin-top: -40px;margin-left: -10px;"></image>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view>
					<view class="cu-list menu" style="padding-bottom: 130rpx">
						<view class="cu-item flex align-center padding-tb" v-for="(item,index) in garbageList[currentGarbageType]"
							:key="item.title + item.index">
							<view class="content flex align-center justify-between">
								<text class="item-title">{{item.title}}</text>
								<view class='cu-tag round item-name' :style="{'background-color': garbageColorMap[item.name]}">{{item.name}}</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<view>
					<view class="cu-list menu">
						<view class="cu-item" v-for="(item,index) in searchResult.result"
							:key="item.title + item.index">
							<view class="content flex justify-between">
								<text class="item-title">{{item.title}}</text>
								<view class='cu-tag round item-name' :style="{'background-color': garbageColorMap[item.name]}">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		post,
		get
	} from '../../utils/request.js'
	export default {
		props: {
			voice: {
				type: String
			}
		},
		data() {
			return {
				searchInput: '',
				isSearch: false,
				CustomBar: this.CustomBar,
				criteria: '',
				currentCardIndex: 0,
				currentGarbageType: 'foodGarbage',
				garbageColorMap: {
					'其他垃圾': '#344059',
					'厨余垃圾': '#04743A',
					'可回收物': '#0A5A99',
					'有害垃圾': '#963131'
				},
				garbageTypes: [{
					id: 'foodGarbage',
					backgroundColor: '#07C160',
					type: '厨余垃圾',
					desc: '指以有机质为主要成分，具有易腐烂发酵发臭等特点的生活垃圾，包括：家庭厨余垃圾、餐厨垃圾、其他厨余垃圾等',
					url: '/static/foodwasteicon.svg'
				}, {
					id: 'recyclableGarbage',
					backgroundColor: '#1196FF',
					type: '可回收垃圾',
					desc: '适宜回收和可资源化利用的生活垃圾，包括：纸类、塑料、金属、玻璃、织物、小型废弃家电等',
					url: '/static/recyclablegarbageicon.svg',
				}, {
					id: 'otherGarbage',
					backgroundColor: '#576B95',
					type: '其他垃圾',
					desc: '指除可回收物、厨余垃圾、有害垃圾以外的其他生活垃圾',
					url: '/static/othergarbageicon.svg'
				}, {
					id: 'hazardousGarbage',
					backgroundColor: '#FA5151',
					type: '有害垃圾',
					desc: '指对人体健康、自然环境造成直接或者潜在危害的物质，如废弃的充电电池、纽扣电池、灯管、医药用品、杀虫剂等',
					url: '/static/harmgarbageicon.svg'
				}],
				garbageList: {
					'foodGarbage': [],
					'otherGarbage': [],
					'hazardousGarbage': [],
					'recyclableGarbage': [],
				},
				searchResult: {
					"result": []
				}
			};
		},
		methods: {
			searchIcon(e) {
				let value = e.target.value;
				this.searchInput = value
				if (value === null || value === '') {
					this.isSearch = false;
				} else {
					post("https://xcx.senlear.com/search?keyword=" + value, null).then(res => {
						this.searchResult = res;
					})
					this.isSearch = true;
				}
			},
			cardSwiper(e) {
				this.currentCardIndex = e.detail.current
				this.currentGarbageType = this.garbageTypes[this.currentCardIndex].id;
			},
			getTagClass(type) {
				switch (type) {
					case '厨余垃圾':
						return 'bg-food-garbage';
					case '其他垃圾':
						return 'bg-other';
					case '可回收垃圾':
						return 'bg-recyclable';
					case '有害垃圾':
						return 'bg-harm';
				}
			},
			getAllGarbage() {
				post("https://xcx.senlear.com/allGarbage", null).then(res => {
					this.garbageList["foodGarbage"] = res.result[2]["foodGarbage"]
					this.garbageList["otherGarbage"] = res.result[3]["otherGarbage"]
					this.garbageList["hazardousGarbage"] = res.result[0]["hazardousGarbage"]
					this.garbageList["recyclableGarbage"] = res.result[1]["recyclableGarbage"]
				})
			},
			initBus() {
				getApp().globalData.bus.on('join', (value) => {
					this.searchIcon({
						'target': {
							value: value
						}
					})
				})
			},
			clearSearchInput(){
				this.searchInput = ''
				this.isSearch = false
			}
		},
		created() {
			this.getAllGarbage()
			this.searchIcon({
				'target': {
					value: this.voice
				}
			})
			this.initBus()
		}
	}
</script>

<style>
	.bg-food-garbage {
		background-color: #07C160;
		color: #ffffff;
	}

	.bg-food-garbage.light {
		color: #07C160;
		background-color: #e8f4d9;
	}

	.bg-other {
		background-color: #576B95;
		color: #ffffff;
	}

	.bg-other.light {
		color: #576B95;
		background-color: #e8f4d9;
	}

	.bg-recyclable {
		background-color: #1196FF;
		color: #ffffff;
	}

	.bg-recyclable.light {
		color: #1196FF;
		background-color: #e8f4d9;
	}

	.bg-harm {
		background-color: #FA5151;
		color: #ffffff;
	}

	.bg-harm.light {
		color: #FA5151;
		background-color: #e8f4d9;
	}
	
	.clear-btn{
		font-size: 14px;
		padding-right: 10px;
	}
	
	.item-title{
		font-weight: 600;
		font-size: 18px;
	}
	
	.item-name{
		padding: 10px;
		color: #fff;
		font-weight: 600;
	}
</style>
